<script setup>
import { defineEmits, ref } from 'vue'
import SettingNavi from '@/components/attendanceComponents/SettingPage/SettingNavi.vue'
import KaoqinGroupName from '@/components/attendanceComponents/SettingPage/GroupSetting/KaoqinGroupName.vue'
import NeedAttendance from '@/components/attendanceComponents/SettingPage/GroupSetting/NeedAttendance.vue'

const emits = defineEmits(['goback'])
const goback = () => {
  emits('goback')
}

const pageFlag = ref(0)
const gotoKaoqinGroupName = () => {
  pageFlag.value = 1
}

const gotoNeedAttendance = () => {
  pageFlag.value = 2
}

const attendanceType = ref('')
const popup = ref(null)
const handleClickPopup = () => {
  popup.value.open()
}
</script>

<template>
  <!--  新建考勤组--主页-->
  <view v-if="pageFlag === 0">
    <SettingNavi :iconFont="'icon-shuaxin'" title="新建考勤组" @pageIndexChange="goback" />
    <view class="container">
      <view class="sectionClass">
         <uni-section title-font-size="32rpx" @click="gotoKaoqinGroupName">
          <template v-slot:decoration>
            <view
              style="
                display: flex;
                align-self: center;
                justify-content: center;
                margin-right: 24rpx;
              "
            >
              <text style="font-size: 32rpx;">考勤组名称</text>
              <i
                class="iconfont icon-yihangyige"
                style="color: #f53f3f; scale: 2; display: flex; align-items: center"
              ></i>
            </view>
          </template>
          <template v-slot:right>
            <view class="textClass">
              <text>未设置</text>
              <i class="iconfont icon-youjiantou"></i>
            </view>
          </template>
        </uni-section>
         <uni-section title-font-size="32rpx" class="textClass" title="需要打卡的人员" @click="gotoNeedAttendance">
          <template v-slot:right>
            <view>
              <text>未设置</text>
              <i class="iconfont icon-youjiantou"></i
            ></view>
          </template>
        </uni-section>
         <uni-section title-font-size="32rpx" class="textClass" title="无需打卡的人员">
          <template v-slot:right>
            <view>
              <text>无</text>
              <i class="iconfont icon-youjiantou"></i
            ></view>
          </template>
        </uni-section>
         <uni-section title-font-size="32rpx" class="textClass" title="人员异动同步">
          <template v-slot:right>
            <view>
              <switch :checked="true" />
            </view>
          </template>
        </uni-section>
      </view>
      <view class="sectionClass">
         <uni-section title-font-size="32rpx" class="textClass" title="考勤类型" @click="handleClickPopup">
          <template v-slot:right>
            <view>
              <text>固定班制</text>
              <i class="iconfont icon-youjiantou"></i
            ></view>
            <uni-popup ref="popup" class="popupClass" type="bottom">
              <view class="popupTitle">
                <view>
                  <image src="@/static/icon/close.svg" style="width: 32rpx; height: 32rpx" />
                </view>
                <view style="font-size: 34rpx; font-weight: 500; color: #1D2129">选择考勤类型</view>
                <view>
                </view>
              </view>
              <uni-card
                title="固定班制"
                @click="() => {
                      attendanceType.value = '固定班制'
                      popup.value.close()
                    }"
              />
            </uni-popup>
          </template>
        </uni-section>
         <uni-section title-font-size="32rpx" class="textClass" title="考勤时间">
          <template v-slot:right>
            <view>
              <text>班次命名：09:00 ~ 18:00</text>
              <i class="iconfont icon-youjiantou"></i
            ></view>
          </template>
        </uni-section>
         <uni-section title-font-size="32rpx" class="textClass" title="考勤方式">
          <template v-slot:right>
            <view>
              <text>未设置</text>
              <i class="iconfont icon-youjiantou"></i
            ></view>
          </template>
        </uni-section>
      </view>
      <view class="sectionClass">
         <uni-section title-font-size="32rpx" class="textClass" title="更多设置">
          <template v-slot:right>
            <view><i class="iconfont icon-youjiantou"></i></view>
          </template>
        </uni-section>
      </view>
    </view>
  </view>
  <!--  新建考勤组-->
  <view v-if="pageFlag === 1">
    <KaoqinGroupName @goback="pageFlag = 0" />
  </view>
  <!--  需要打卡的人员-->
  <view v-if="pageFlag === 2">
    <NeedAttendance @goback="pageFlag = 0" />
  </view>
</template>

<style lang="scss" scoped>
.container {
  margin: 40rpx 32rpx 0rpx 32rpx;
}

.sectionClass {
  border-radius: 16rpx;
  margin-top: 32rpx;
  overflow: hidden;
}

.textClass {
  color: #86909c;
  font-family: 'PingFang SC';
  font-size: 28rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 39.2rpx;
}

.popupClass {
  background-color: #ffffff;
  //height: 1556rpx;
  width: 100%;
}

.popupTitle {
  display: flex;
  justify-content: space-between;
  padding: 32rpx;
  border-bottom: 1px solid #f7f8fa;
  background-color: #FFFFFF;
}
</style>
